<template>
    <div class="container">
        <div class="case-detail__title">
            {{ detail.name }}
        </div>

        <div class="case-detail__swiper">
            <var-swipe>
                <var-swipe-item v-for="file in detail.projectfiles" :key="item">
                    <img :src="file +
                        '?x-oss-process=image/watermark,image_' +
                        toBase64(
                            'water/logo_white.png?x-oss-process=image/resize,P_30'
                        ) +
                        ',g_center,t_60'
                        " />
                </var-swipe-item>
            </var-swipe>
        </div>

        <div class="tools">
            <div class="icon-views">
                <img :src="`${_oss_}images/works/icon-view.png`" alt="北京华锐云空间" />
                <span>{{ detail.page_view || 0 }}</span>
            </div>
            <div class="icon-star" @click="onLike(detail)">
                <img v-if="detail.is_like" :src="`${_oss_}images/works/icon-like-active.png`" alt="北京华锐云空间" />
                <img v-else :src="`${_oss_}images/works/icon-like.png`" alt="北京华锐云空间" />
                <span>{{ detail.like || 0 }}</span>
            </div>
        </div>

        <div class="case-detail__btn-group">
            <div class="btn btn-1" :class="{ disabled: IsCaseVideoDisable() }" @click="emits('onCaseView')">
                案例视频
            </div>
            <div class="btn btn-2" @click="emits('onCaseExperience')">
                {{ detail.id == 165 ? "立即体验" : "案例体验" }}
            </div>
        </div>

        <div class="case-detail__title">案例介绍</div>

        <div class="case-detail__desc" v-html="detail.synopsiscontent || ''"></div>
    </div>
</template>
<script setup>
import { useCaseLike } from "@/hooks";
const { onLike } = useCaseLike();
const userStore = useUserStore();
const props = defineProps({
    detail: {
        type: Object,
        default: () => ({}),
    },
});

const IsCaseVideoDisable = () => {
    if (props.detail.id == 253 || props.detail.id == 256) {
        if (userStore.userInfo.level == 3) {
            return !props.detail.url;
        } else {
            return true;
        }
    }
    return !props.detail.url;
}


const emits = defineEmits(["onCaseView", "onCaseExperience"]);
</script>
<style lang="scss" scoped>
.container {
    padding: 0 15px;
}

.case-detail {
    &__title {
        color: #333;
        font-size: 17px;
        font-weight: 600;
        margin-bottom: 14px;
    }

    &__swiper {
        .var-swipe {
            width: 345px;
            height: 175px;
            border-radius: 3px;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

    .tools {
        display: flex;
        margin-top: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;

        .icon-star {
            cursor: pointer;
        }

        .icon-star,
        .icon-views {
            display: flex;
            align-items: center;
            margin-right: 15px;
            color: #333;
            font-size: 14px;
            font-weight: 500;

            img {
                width: 14px;
                margin-right: 3px;
            }
        }
    }

    &__btn-group {
        display: flex;
        justify-content: space-between;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 30px;

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 30px;
            border-radius: 3px;
            background-color: rgba(21, 121, 188, 0.9);
            color: #fff;
            font-size: 14px;

            &.disabled {
                color: #fff;
                background-color: #ccc;
                pointer-events: none;
            }

            &-1::before {
                content: "";
                width: 15px;
                height: 14px;
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-1_active.png");
                background-size: 100% 100%;
                margin-right: 10px;
            }

            &-2::before {
                content: "";
                width: 15px;
                height: 15px;
                background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-2_active.png");
                background-size: 100% 100%;
                margin-right: 10px;
            }

            &:not(.disabled):hover {
                background: #1579bc;
                color: #fff;

                &.btn-1::before {
                    background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-1_active.png");
                }

                &.btn-2::before {
                    background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-2_active.png");
                }
            }
        }
    }

    &__desc {
        color: #333;
        word-break: break-all;
        white-space: pre-wrap;
        font-size: 16px !important;
        font-family: "宋体" !important;
        line-height: 1.5em !important;
        margin-bottom: 20px;

        :deep(*) {
            font-size: 16px !important;
            font-family: "宋体" !important;
            line-height: 1.5em !important;
        }

        :deep(img) {
            max-width: 100%;
            display: block;
        }
    }
}
</style>
